<template>
  <!-- 文章详情页面 -->
  <div>
    <!-- 导航 -->
    <van-nav-bar
      class="nav"
      title="文章详情"
      left-arrow
      @click-left="$router.back()"
      @click="leftEvent"
    />
    <!-- 标题 -->
    <div class="article">
      <h1 style="font-size: 30px; margin: 20px">{{ list.title }}</h1>
      <!-- 文章内容 -->

      <!-- 文章作者 -->
      <div class="userinfo">
        <div class="img">
          <van-image
            round
            fit="cover"
            width="2rem"
            height="2rem"
            :src="list.aut_photo"
          />

          <div class="info">
            <span>{{ list.aut_name }}</span>
            <br />
            <span style="color: #bbb">{{ list.pubdate | articleDate }}</span>
          </div>
        </div>
        <!-- 关注按钮 -->
        <van-button icon="plus" type="info" round> 关注</van-button>
      </div>
    </div>

    <!-- 文章内容 -->
    <div class="content" v-html="list.content" ref="html"></div>
    <!-- 分割线 -->
    <div>
      <van-divider>想念冠希哥</van-divider>

      <!-- 点赞,不喜欢 -->
      <div class="button">
        <van-button
          round
          plain
          style="width: 120px"
          icon="flower-o"
          type="primary"
          >点赞</van-button
        >
        <van-button
          plain
          round
          style="width: 120px"
          color="red"
          icon="delete-o"
          type="warning"
          >不喜欢</van-button
        >
      </div>

      <!-- 评论列表 -->
      <van-cell title="左侧内容" v-for="(item, index) in userpl" :key="index">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->

        <template #title>
          <div class="cellInfo">
            <van-image
              round
              fit="cover"
              width="1rem"
              height="1rem"
              :src="item.aut_photo"
            />
            <div class="plInfo">
              <h5>{{ item.aut_name }}</h5>
              <span>{{ item.content }}</span>
              <div>
                <span>{{ item.pubdate | articleDate }}</span>
                <van-button size="mini" type="default">回复(x)</van-button>
              </div>
            </div>
          </div>
        </template>
        <!--        
  <template #label>  
 </template> -->
        <template #right-icon>
          <van-icon name="like-o" />
        </template>
      </van-cell>

      <!-- 发布评论input和按钮 -->
      <van-field v-model="sms" center clearable placeholder="请输入评论内容">
        <template #button>
          <van-button size="small" type="info">发布</van-button>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
import { article_infoAPI, getArticleAPI } from "@/api";

// 导入highlight插件
import highlight from "highlight.js";
// highlight.highlightAll() 这个方法会找到页面上所有的pre(代表一段) code(代表一行)标签加入样式，使用前要先导入css
// highlight.highlightElement(dom)
import "highlight.js/styles/vs2015.css";

export default {
  data() {
    return {
      sms: "",
      list: [],
      userpl: [],
    };
  },
  async created() {
    //请求的到文章数据
    let id = this.$route.query.id;
    // console.log(article_id);
    let res = await article_infoAPI(id);
    // console.log(res);
    this.list = res.data.data;
    // console.log(this.list);

    // 等数据渲染完成后调用highlight的方法,让数据内的pre高亮
    this.$nextTick(() => {
      const _html = this.$refs.html.querySelectorAll("pre");
      _html.forEach((item) => {
        highlight.highlightElement(item);
      });
    });

    let plRes = await getArticleAPI(id);
    // console.log(plRes);
    this.userpl = plRes.data.data.results;
  },
  methods: {
    leftEvent() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped lang="less">
* {
  font-size: 16px;
}
.nav {
  position: fixed;
  width: 100%;
  left: 0;
  font-size: 16px;
  z-index: 999;
  top: 0;
}
.userinfo {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .img {
    display: flex;
    align-items: center;
  }
}
.cellInfo {
  display: flex;
  .van-image {
    margin-right: 10px;
  }
  .plInfo {
    h5 {
      color: #466b9d;
      font-weight: normal;
    }
    div {
      display: flex;
      color: #909090;
      .van-button__text {
        color: #000;
      }
    }
  }
}
.button {
  display: flex;
  justify-content: space-evenly;
  //   margin-bottom: 53px;
}
.article {
  padding: 0 16.5px;
  margin: 46px 0 0;
  border: 1px solid #fff;
  box-sizing: border-box;
  width: 100%;
  ::v-deep h3 {
    font-size: 24px;
    margin: 8.5px 0;
  }
}
.info {
  margin-left: 16.5px;
  flex: 1px;
}
::v-deep .content {
  word-wrap: break-word; // 当数据中的最后一个单词在一行内放不下时，自动换行
  // white-space: pre; // 可以让数据保持原样，保留空格和空白区域等
  overflow: hidden;
  img {
    // 给文章详情内可能携带的图片设置宽度
    width: 80%;
  }
}
</style>